@import 'bourbon'

.cf
	@include clearfix

$rs: 16px

$font-serif: Linux Libertine
$font-sans: Open Sans, MundoSans, "Helvetica Neue", Arial, Helvetica, sans-serif

@include font-face(icons, '../fonts/icons', normal, normal)

@mixin respond-to($breakpoint)
	@media only screen and (max-width: $breakpoint + px)
		@content

/* Apply these base styles to all icons */
.icon-ghost:before,
.icon-feed:before,
.icon-twitter:before,
.icon-google-plus:before,
.icon-facebook:before
	font-family: 'icons'
	speak: none
	font-style: normal
	font-weight: normal
	font-variant: normal
	text-transform: none
	line-height: 1
	-webkit-font-smoothing: antialiased
	text-decoration: none

/* Each icon is created by inserting the corret character into the content of the :before pseudo element. Like a boss. */
.icon-ghost:before
	content: "\e000"

.icon-feed:before
	content: "\e001"

.icon-twitter:before
	content: "\e002"
	font-size: 1.1em

.icon-google-plus:before
	content: "\e003"

.icon-facebook:before
	content: "\e004"


body
	font-family: $font-sans
	margin: 0
	padding: 0
	text-rendering: optimizeLegibility
	-webkit-font-smoothing: antialiased
	-moz-font-feature-settings: "liga=1, dlig=1"
	-ms-font-feature-settings: "liga", "dlig"
	-webkit-font-feature-settings: "liga", "dlig"
	-o-font-feature-settings: "liga", "dlig"
	font-feature-settings: "liga", "dlig"

.logo-readium
	position: fixed
	left: 10px
	top: 10px
	width: $rs*3
	height: $rs*3
	background-color: #000
	overflow: hidden
	z-index: 99
	.logo
		display: block
		position: absolute
		top: $rs/2
		left: $rs/2
		width: $rs*2
		height: $rs*2
		background-image: url('/assets/img/readium-logo.png')
		background-size: cover
		background-repeat: no-repeat

.teaserimage
	height: 450px
	position: relative
	overflow: hidden
	background-color: #000
	.teaserimage-image
		background-size: cover
		background-position: center
		position: absolute
		top: 0
		left: 0
		right: 0
		bottom: 0
		z-index: 1
		text-indent: -9999px

.blog-header
	width: 100%
	max-width: 640px
	margin: 0 auto
	position: relative
	padding: 0
	@include box-sizing(border-box)
	@include respond-to(800)
		padding: 0 $rs
	.blog-logo
		width: $rs*7.5
		height: $rs*7.5
		position: absolute
		top: -$rs*3.75
		right: 50%
		margin-right: -$rs*3.75
		background-size: cover
		border-radius: 50%
		z-index: 99
		text-indent: -9999px
		border: 3px solid #fff
		background-color: #fff
		-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3)
		-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3)
		box-shadow: 0 1px 1px rgba(0,0,0,0.3)
	.blog-title
		margin: 0
		padding: $rs*5.25 $rs $rs/2
		font-size: 50px
		text-align: center
		font-weight: 700
		letter-spacing: -2px
		outline: 0
		line-height: 50px
		word-break: break-word
		color: #333
	.blog-description
		margin: 0 0 20px
		padding: 0 $rs*2
		font-size: $rs/8*9
		line-height: 1.5
		color: #666
		text-align: center
		font-weight: 400
	.custom-links
		margin: 0 0 50px
		text-align: center
		color: #ccc
		a
			text-decoration: none
			color: #999
			&:hover
				color: #333

.content
	width: 100%
	max-width: 640px
	margin: 0 auto
	@include box-sizing(border-box)
	@include respond-to(800)
		padding: 0 $rs*2
	article
		padding: 40px 0
		border-bottom: 1px solid #f2f2f0
		&:last-child
			border-bottom: 0px
		.post-title
			letter-spacing: -0.02em
			font-weight: 700
			font-style: normal
			display: block
			font-size: 28px
			line-height: 1.1
			margin: 0 0
			a
				text-decoration: none
				color: #333332
				&:hover
					text-decoration: none
		.post-excerpt
			letter-spacing: -0.02em
			font-weight: 300
			font-style: normal
			font-size: 20px
			line-height: 1.3
			color: #666665
		.post-meta
			font-size: 14px
			color: #b3b3b1
			line-height: 30px
			a
				color: #b3b3b1
				text-decoration: none
				&:hover
					text-decoration: underline
.container.featured
	padding-bottom: 40px

.post-template .content
	max-width: 700px

.index-headline
	border-top: 1px solid #dededc
	margin: 0
	padding: 16px 0
	span
		color: #b3b3b1
		font-size: $rs/8*5
		text-transform: uppercase
		letter-spacing: 1px

.archive-template
	.index-headline.featured
		display: none

.pagination
	text-align: center
	padding: $rs*3 0 0
	font-size: $rs/4*3
	a
		color: #999
		text-decoration: none
		&:hover
			color: #333

.post-reading
	position: absolute
	top: 10px
	right: 30px
	line-height: 44px
	display: inline-block
	white-space: nowrap
	color: rgba(0,0,0,0.25)
	font-size: 14px
	letter-spacing: -0.02em
	font-weight: 400
	font-style: normal
	font-family: $font-sans
	z-index: 999
.tag-articleimage .post-reading
	color: rgba(255,255,255,0.9)
	text-shadow: 0px 1px 4px rgba(0,0,0,0.25), 0px 0px 1px rgba(0,0,0,0.5)

.site-footer
	margin: 0 auto
	padding: $rs*3 0
	width: 100%
	max-width: 640px
	font-size: $rs/4*3
	text-align: center
	color: #999
	line-height: $rs*1.1
	a
		color: #666
		text-decoration: none
		&:hover
			color: #333
.post
	.article-image
		position: absolute
		background-color: #000
		top: 0
		left: 0
		right: 0
		bottom: 0
		overflow: hidden
		.post-image-image
			background-size: cover
			position: absolute
			top: 0
			left: 0
			right: 0
			bottom: 0
			text-indent: -9999px
			padding-top: 33%
			z-index: 1
		.post-meta
			position: absolute
			bottom: $rs*5
			left: 30%
			right: 30%
			z-index: 999
			font-family: $font-sans
			@include box-sizing(border-box)
			@include respond-to(800)
				left: $rs
				right: $rs
		.post-title
			font-weight: 700
			font-style: normal
			letter-spacing: -0.04em
			font-size: 50px
			line-height: 1.1
			color: #fff
			margin-bottom: 16px
			text-shadow: 0px 1px 16px rgba(0,0,0,0.5), 0px 0px 1px rgba(0,0,0,0.5)
		.author-image
			display: inline-block
			width: 30px
			height: 30px
			line-height: 30px
			margin-right: 8px
			margin-bottom: -10px
			float: left
			background-size: cover
			border-radius: 100%
			text-indent: -9999px
		.author-name
			display: inline
		.post-meta-text
			color: rgba(255,255,255,0.75)
			letter-spacing: -0.02em
			font-weight: 400
			font-style: normal
			text-shadow: 0px 1px 4px rgba(0,0,0,0.25), 0px 0px 1px rgba(0,0,0,0.5)
			font-size: 14px
			overflow: hidden
			font-family: $font-sans
			white-space: nowrap
			text-overflow: ellipsis
			a
				color: rgba(255,255,255,0.75)
				&:hover
					color: rgba(255,255,255,1)
		.fa-angle-down
			font-size: 32px
			margin: 64px auto 0
			color: rgba(255,255,255,0.75)
			&:hover
				color: #fff
		.topofpage
			text-decoration: underline
	.noarticleimage
		.post-meta
			font-family: $font-sans
			padding-top: 60px
		.post-title
			font-weight: 700
			font-style: normal
			letter-spacing: -0.04em
			font-size: 50px
			line-height: 1.1
			color: #333332
			margin-bottom: 16px
		.author-image
			display: inline-block
			width: 30px
			height: 30px
			line-height: 30px
			margin-right: 8px
			margin-bottom: -10px
			float: left
			background-size: cover
			border-radius: 100%
			text-indent: -9999px
		.author-name
			display: inline
		.post-meta-text
			color: #b3b3b1
			letter-spacing: -0.02em
			font-weight: 400
			font-style: normal
			font-size: 14px
			overflow: hidden
			font-family: $font-sans
			white-space: nowrap
			text-overflow: ellipsis
	.post-content
		width: 100%
		font-family: $font-serif
		color: #333
		h1, h2, h3
			font-family: $font-sans
		h3, h4, h5, h6
			letter-spacing: -0.02em
			font-weight: 700
			font-style: normal
			font-size: 24px
			line-height: 1.3
			margin: 0
			font-family: $font-sans
			margin-bottom: 4px
		h2, h1
			letter-spacing: -0.02em
			font-weight: 700
			font-style: normal
			font-size: 32px
			line-height: 1.2
			padding-top: 31px
			margin-bottom: 4px
		p
			font-weight: 400
			font-style: normal
			font-size: 22px
			line-height: 30px
			margin: 0
			padding-bottom: 30px
			color: #333
			-webkit-hyphens: auto
			-moz-hyphens: auto
			hyphens: auto
		a
			color: #333
			text-decoration: underline
		img
			max-width: 100%
			margin: 0 auto
		figure
			margin: 0
			padding: 0 0 30px
		figcaption
			font-weight: 400
			font-style: italic
			font-size: 16px
			line-height: 1.3
			color: #666665
			outline: 0
			z-index: 300
			text-align: center
		code
			background-color: #333
			color: #fff
			border-color: #333
			font-family: Inconsolata, monospace, sans-serif
			border-radius: 8px
			padding: 2px 4px 4px
			position: relative
			top: -3px
			white-space: nowrap
			-webkit-hyphens: none
			-moz-hyphens: none
			hyphens: none
		pre > code
			background-color: #333
			border-color: #333
			@include box-sizing(border-box)
			padding: modular-scale(1rem, 1, 1.33) modular-scale(1rem, 2, 1.33)
			color: #fff
			line-height: 1.4
			width: 100%
			display: block
			white-space: pre
			overflow: auto
			border-radius: 8px
		pre
			padding: 0
			margin: 0 0 2rem
			@include box-sizing(border-box)
		pre code, tt
			white-space: -moz-pre-wrap
			white-space: pre-wrap
			border: none
		hr
			border: 0
			padding: 0
			display: block
			width: 15%
			margin: 30px auto
			border: 0px solid #ddd
			border-top: 1px solid #ddd
		blockquote
			margin: 0 0 30px
			border: none
			p
				letter-spacing: 0.01rem
				font-weight: 400
				font-style: italic
				border-left: 3px solid #57ad68
				padding-left: 20px
				margin-left: -26px
				padding-bottom: 3px
		ul, ol
			padding: 0 0 30px
			margin: 0
			li
				padding: 0
				font-weight: 400
				font-style: normal
				font-size: 23px
				line-height: 30px
				margin-left: 30px
				margin-bottom: 12px
				padding-top: 2px
				p
					padding: 0 0 golden-ratio(1rem,  1)
		ol li
			list-style-type: decimal
	.bottom-teaser
		padding: 50px 0
		font-family: $font-sans
		hr
			border: 0
			padding: 0
			display: block
			width: 15%
			margin: 16px 0 16px 100px
			border: 0px solid #ddd
			border-top: 1px solid #ddd
		.isLeft
			float: left
			width: 47%
			@include box-sizing(border-box)
			@include respond-to(800)
				width: 100%
				padding-bottom: $rs*2
			.index-headline
				padding-bottom: 32px
			a
				color: #000
				text-decoration: none
				&:hover
					color: #333
					text-decoration: underline
			.author-image
				display: block
				width: 80px
				height: 80px
				float: left
				background-size: cover
				border-radius: 100%
				text-indent: -9999px
			h4
				font-size: 18px
				line-height: 1.1
				font-weight: 700
				padding: 0
				margin: 0
				padding-left: 100px
			p
				font-size: 14px
				line-height: 1.3
				font-weight: 400
				padding: 0
				margin: 0
				padding-left: 100px
				&.published
					color: #999
		.isRight
			float: right
			width: 47%
			@include box-sizing(border-box)
			@include respond-to(800)
				width: 100%
			.index-headline
				padding-bottom: 32px
			.site-footer
				margin: 0
				padding: 0
				color: #333
				text-align: left
				font-size: 14px
				line-height: 1.3
				color: #999
				a
					color: #333
					text-decoration: none
					&:hover
						text-decoration: underline
				.poweredby
					display: block
					padding-bottom: 18px
					font-weight: 700
					color: #333
.share
	text-align: right
	padding: 20px 0 0
	a
		text-decoration: none
		color: #bbb
		padding-left: 12px
		.hidden
			display: none
		&:hover
			color: #333

.bottom-closer
	width: 100%
	position: relative
	overflow: hidden
	.background-closer-image
		position: absolute
		top: 0
		left: 0
		right: 0
		bottom: 0
		text-indent: -9999px
		background-size: cover
		background-repeat: no-repeat
		background-position: center
	.inner
		width: 100%
		position: relative
		z-index: 99
		max-width: 640px
		padding: 120px 0 90px
		text-align: center
		margin: 0 auto
		.blog-title
			margin: 0
			padding: 0 0 10px
			font-size: 50px
			text-align: center
			font-weight: 700
			letter-spacing: -2px
			outline: 0
			line-height: 50px
			word-break: break-word
			color: #fff
			text-shadow: 0px 1px 16px rgba(0,0,0,0.5), 0px 0px 1px rgba(0,0,0,0.5)
		.blog-description
			margin: 0 0 50px
			padding: 0 $rs*2
			font-size: $rs/8*9
			line-height: 1.5
			color: #fff
			text-align: center
			font-weight: 400
			text-shadow: 0px 1px 16px rgba(0,0,0,0.5), 0px 0px 1px rgba(0,0,0,0.5)
		.custom-links
			margin: 0 0 50px
		.btn
			display: inline-block
			text-align: center
			letter-spacing: -0.02em
			font-size: 15px
			font-weight: 400
			font-style: normal
			text-decoration: none
			cursor: pointer
			height: 44px
			background: #57ad68
			color: #fff
			vertical-align: middle
			box-sizing: border-box
			border-radius: 999em
			line-height: 44px
			padding: 0 18px

#disqus_thread
	margin-top: 50px
.post-tag-articleimage
	display: none